<template>
  <el-dialog
    :title="isEdit ? '修改' : '新增'"
    :visible.sync="dialogVisible"
  
    width="30%"
    :before-close="handleClose"
    customClass="customWidth"
  >
    <el-form  :rules="rules" :model="ruleForm" ref="ruleForm" label-width="200px">
      <el-row :gutter="20">
        <el-col :span="50">
          <el-form-item label="分站编号" prop="SubStationNum">
            <el-input v-model="ruleForm.SubStationNum"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="50">
          <el-form-item label="分站名称" prop="SubStationName">
            <el-input v-model="ruleForm.SubStationName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="50">
          <el-form-item label="分站类型" prop="SubStationType">
            <el-select v-model="ruleForm.SubStationType" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="50">
          <el-form-item label="分站位置" prop="SubStationLocation">
            <el-input v-model="ruleForm.SubStationLocation"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="50">
          <el-form-item label="分站IP" prop="SubStationIP">
            <el-input v-model="ruleForm.SubStationIP"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="50">
          <el-form-item label="端口号" prop="SubStationPort">
            <el-input v-model="ruleForm.SubStationPort"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" :loading="loading" @click="save"
        >确定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import { Message } from "element-ui";
import {
  dingbanfenzhanpeizhiadd,
  dingbanfenzhanpeizhixiugai,
} from "../../../https/api/user";
const ruleForm = {
  SubstationName: "",
  SubstationType: "", 
  SubstationLocation: "", 
  SubstationIP: "", 
  SubStationNum: "",
  SubStationPort: "",
};
export default {
  data() {
    return {
      
      dialogVisible: false,
      ruleForm,
      isEdit: false,
      loading: false,
      rules:{
        SubstationName: [
          { required: true, message: "请输入分站编号", trigger: "blur" },
        ],
        SubstationType: [
          { required: true, message: "请输入分站编号", trigger: "blur" },
        ],
      },
      SubstationType: "",
      options: [
        {
          value: "测温",
          label: "测温",
        },
        {
          value: "震动",
          label: "震动",
        },
        {
          value: "传感器",
          label: "传感器",
        },
        {
          value: "矿压",
          label: "矿压",
        },
      ],
     
    };
  },
  methods: {
    show(data) {
      this.isEdit = !!data;
      this.ruleForm = data || ruleForm;
      this.dialogVisible = true;
    },
    async save() {
      const api = this.isEdit
        ? dingbanfenzhanpeizhixiugai
        : dingbanfenzhanpeizhiadd;
      try {
        this.loading = true;
        const result = await api(this.ruleForm);
        const message = this.isEdit ? "修改成功！" : "添加成功！";
        Message({
          message,
          type: "success",
        });
        this.$parent.Onlist();
        this.dialogVisible = false;
        this.$refs.ruleForm.resetFields();
        console.log(">>>>", result);
      } catch (e) {
        console.log(e);
      } finally {
        this.loading = false;
      }
    },
    handleClose(done) {
      // this.$confirm('确认关闭？')
      // .then(_ => {
      done();
      // })
      // .catch(_ => { });
    },
  },
};
</script>

<style scoped lang="less">
.el-select {
  width: 100%;
}
.customWidth {
  width: 30% !important;
  min-width: 100px !important;
}
</style>